<template>
  <div class="drive-container" :style="driveContainerHeight">
    <!-- 顶部导航栏 -->
    <TopNavBar> </TopNavBar>

    <!-- 行驶控制页面主体 -->
    <div class="drive-main">
      <van-collapse v-model="activeNames">
        <!-- 方向 -->
        <van-collapse-item title="方向" name="direction" class="direction-container" readonly>
          <template #right-icon>
            <van-button type="primary" size="small" @click="rotateGrid">旋转</van-button>
          </template>

          <div class="direction-box" :style="rotateStyle">
            <!-- 第一行 -->
            <div class="row">
              <div class="direction-item"></div>
              <div
                class="direction-item"
                :class="{ active: activeDirection === 1 }"
                @click="handleArrowUp"
              >
                <SvgIcon :icon-class="'drive-arrow-up'" />
                <div class="direction-title" :style="rotateStyle">1</div>
              </div>
              <div class="direction-item"></div>
            </div>

            <!-- 第二行 -->
            <div class="row">
              <div
                class="direction-item"
                :class="{ active: activeDirection === 2 }"
                @click="handleArrowLeft"
              >
                <SvgIcon :icon-class="'drive-arrow-left'" />
                <div class="direction-title" :style="rotateStyle">2</div>
              </div>
              <div class="direction-item"></div>
              <div
                class="direction-item"
                :class="{ active: activeDirection === 4 }"
                @click="handleArrowRight"
              >
                <SvgIcon :icon-class="'drive-arrow-right'" />
                <div class="direction-title" :style="rotateStyle">4</div>
              </div>
            </div>

            <!-- 第三行 -->
            <div class="row">
              <div class="direction-item"></div>
              <div
                class="direction-item"
                :class="{ active: activeDirection === 3 }"
                @click="handleArrowDown"
              >
                <SvgIcon :icon-class="'drive-arrow-down'" />
                <div class="direction-title" :style="rotateStyle">3</div>
              </div>
              <div class="direction-item"></div>
            </div>
          </div>
        </van-collapse-item>

        <!-- 复位 -->
        <van-collapse-item title="" name="reset" class="reset-container" readonly>
          <template #right-icon>
            <van-button type="primary" block class="reset-btn" @click="handleReset"
              >复位</van-button
            >
          </template>
        </van-collapse-item>

        <!-- 行驶抱闸 -->
        <van-collapse-item
          title="行驶抱闸"
          name="drive-brake"
          class="drive-brake-container"
          readonly
        >
          <template #right-icon>
            <span class="tip" v-if="driveSwitch === true">已打开行驶抱闸</span>
            <span class="tip" v-else>已关闭行驶抱闸</span>
            <van-switch v-model="driveSwitch" />
          </template>
        </van-collapse-item>

        <!-- 报警 -->
        <van-collapse-item title="报警" name="alarm" class="alarm-container" readonly>
          <template #right-icon>
            <span class="tip" v-if="alarmSwitch === true">已关闭报警</span>
            <span class="tip red" v-else>报警中</span>
            <van-switch v-model="alarmSwitch" />
          </template>
        </van-collapse-item>

        <!-- 位置 -->
        <van-collapse-item title="位置" name="location" class="location-container">
          <van-form @submit="onSubmit">
            <van-field
              v-model="row"
              name="row"
              label="行"
              placeholder="请输入行"
              clearable
              :rules="[{ required: true, message: '请输入行' }]"
            />
            <van-field
              v-model="col"
              name="col"
              label="列"
              placeholder="请输入列"
              clearable
              :rules="[{ required: true, message: '请输入列' }]"
            />
            <van-field
              v-model="layer"
              name="layer"
              label="层"
              placeholder="请输入层"
              clearable
              :rules="[{ required: true, message: '请输入层' }]"
            />
            <div class="location-btn">
              <van-button type="primary" block>设置</van-button>
            </div>
          </van-form>
        </van-collapse-item>

        <!-- 举升和下降 -->
        <van-collapse-item
          title="举升和下降"
          name="lifting-and-lowering"
          class="lifting-and-lowering-container"
        >
          <van-button type="primary" block class="lifting-btn">举升</van-button>
          <van-button type="primary" block class="lowering-btn">下降</van-button>
        </van-collapse-item>

        <!-- 行驶方式1 -->
        <van-collapse-item title="按距离行驶" name="driving-mode1" class="driving-mode1-container">
          <van-form @submit="drivingMode1Submit">
            <!-- 距离 -->
            <van-field
              class="distance"
              v-model="distance"
              type="number"
              label="距离"
              placeholder="请输入距离(cm)"
            />

            <!-- 速度 -->
            <van-field class="speed" name="speed" label="速度">
              <template #input>
                <van-slider
                  v-model="speedValue"
                  @change="handleSpeedChange"
                  :min="0"
                  :max="2"
                  :step="1"
                >
                  <template #button>
                    <div class="speed-button">{{ speedText }}</div>
                  </template>
                </van-slider>
              </template>
            </van-field>

            <!-- 校准 -->
            <van-field class="adjust" name="adjust" label="校准">
              <template #input>
                <van-button type="primary" size="small">通道</van-button>
                <van-button type="primary" size="small">巷道</van-button>
                <van-button type="primary" size="small">货位</van-button>
              </template>
            </van-field>

            <div class="location-btn">
              <van-button type="primary" block>行驶</van-button>
            </div>
          </van-form>
        </van-collapse-item>

        <!-- 行驶方式2 -->
        <van-collapse-item title="上线前测试" name="driving-mode2" class="driving-mode2-container">
          <van-form @submit="drivingMode2Submit">
            <!-- 终点类型 -->
            <van-field class="end-type" name="end-type" label="终点类型">
              <template #input>
                <van-button type="primary" size="small">换向位</van-button>
                <van-button type="primary" size="small">货位</van-button>
                <van-button type="primary" size="small">孔位</van-button>
                <van-button type="primary" size="small">行驶</van-button>
              </template>
            </van-field>

            <!-- 行驶距离 -->
            <van-field class="distance" name="distance" label="行驶距离">
              <template #input> <span>行驶了???cm</span> </template>
            </van-field>

            <div class="location-btn">
              <van-button type="primary" block class="drive-btn">行驶</van-button>
              <van-button type="primary" block class="stop-btn">停止</van-button>
            </div>
          </van-form>
        </van-collapse-item>

        <!-- 充电控制 -->
        <van-collapse-item
          title="充电控制"
          name="charge-control"
          class="charge-control-container"
          readonly
        >
          <template #right-icon>
            <span class="tip" v-if="chargeSwitch === true">已打开充电</span>
            <span class="tip" v-else>已关闭充电</span>
            <van-switch v-model="chargeSwitch" />
          </template>
        </van-collapse-item>
      </van-collapse>
    </div>

    <!-- 底部车辆信息 -->
    <van-floating-panel
      v-model:height="floatPanelHeight"
      :anchors="anchors"
      class="bottom-car-info"
    >
      <h4>1号车(182.168.10.0)信息 {{ floatPanelHeight.toFixed(0) }}</h4>

      <div class="row">
        <div class="left-box">
          <span class="title">模式：</span>
          <span class="value">0</span>
        </div>
        <div class="right-box">
          <span class="title">错误码：</span>
          <span class="value">0</span>
        </div>
      </div>

      <div class="row">
        <div class="left-box">
          <span class="title">电量：</span>
          <span class="value">82.0</span>
        </div>
        <div class="right-box">
          <span class="title">充电状态：</span>
          <span class="value">未充电</span>
        </div>
      </div>

      <div class="row">
        <div class="left-box">
          <span class="title">实际距离：</span>
          <span class="value">0</span>
        </div>
        <div class="right-box">
          <span class="title">当前位置：</span>
          <span class="value">(0,0,0)</span>
        </div>
      </div>

      <div class="row">
        <div class="left-box">
          <span class="title">方向：</span>
          <span class="value">巷道</span>
        </div>
        <div class="right-box">
          <span class="title">货叉：</span>
          <span class="value">下降</span>
        </div>
      </div>
    </van-floating-panel>

    <!-- 底部tab栏 -->
    <BottomTabBar></BottomTabBar>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

// 折叠面板当前激活
// const activeNames = ref([
//   'direction',
//   'reset',
//   'drive-brake',
//   'alarm',
//   'location',
//   'lifting-and-lowering',
//   'driving-mode1',
//   'driving-mode2',
//   'charge-control',
// ])
const activeNames = ref(['direction'])

// 方向
// 旋转角度
const rotation = ref(0)

/**
 * 旋转九宫格
 */
const rotateGrid = () => {
  // rotation.value = (rotation.value + 90) % 360 // 每次旋转90度，且保证角度在 0 - 360 度之间
  // rotation.value += 90
  rotation.value = (rotation.value + 180) % 360 // 每次旋转180度，且保证角度在 0 - 360 度之间
}

/**
 * 动态计算旋转样式
 */
const rotateStyle = computed(() => {
  return {
    transform: `rotate(${rotation.value}deg)`,
    transition: 'transform 0.3s ease', // 添加平滑过渡效果
  }
})

// 当前激活的方向 1: 上 2: 左 3: 下 4: 右
const activeDirection = ref<number | null>(null)

/**
 * 向上
 */
const handleArrowUp = () => {
  activeDirection.value = 1
  console.log('向上', activeDirection.value)
}
/**
 * 向左
 */
const handleArrowLeft = () => {
  activeDirection.value = 2
  console.log('向左', activeDirection.value)
}
/**
 * 向右
 */
const handleArrowRight = () => {
  activeDirection.value = 4
  console.log('向右', activeDirection.value)
}
/**
 * 向下
 */
const handleArrowDown = () => {
  activeDirection.value = 3
  console.log('向下', activeDirection.value)
}

// 复位
const handleReset = () => {
  activeDirection.value = null
  showToast('复位成功')
}

// 行驶抱闸
const driveSwitch = ref(true)

// 报警
const alarmSwitch = ref(false)

// 位置
const row = ref()
const col = ref()
const layer = ref()
const onSubmit = (values: any) => {
  console.log('位置submit', values)
}

// 行驶方式1
const distance = ref()
const speedValue = ref(1)
const drivingMode1Submit = (values: any) => {
  console.log('行驶方式1submit', values)
}
// 速度
const speedText = computed(() => {
  switch (speedValue.value) {
    case 0:
      return '极慢速'
    case 1:
      return '慢速'
    case 2:
      return '正常'
    default:
      return ''
  }
})
const handleSpeedChange = (value: number) => {
  showToast('当前值：' + value)
}

// 行驶方式2
const drivingMode2Submit = (values: any) => {
  console.log('行驶方式2submit', values)
}

// 充电控制
const chargeSwitch = ref(false)

// 底部车辆信息
// const anchors = [110, window.innerHeight * 0.4] // 锚点数组，表示面板可以固定在的位置
const anchors = [110, 267]
// 当前面板的显示高度
const floatPanelHeight = ref(anchors[1])
// drive-container 的高度
const driveContainerHeight = computed(() => {
  return {
    padding: `var(--van-nav-bar-height) 0 ${floatPanelHeight.value}px`,
  }
})
</script>

<style lang="scss" scoped>
.drive-container {
  height: 100%;
  overflow: auto; // 只允许内部滚动（如果内容真的超出）
  // padding: var(--van-nav-bar-height) 0 var(--van-tabbar-height);

  // 行驶控制页面主体
  .drive-main {
    // 给每个 .van-collapse-item 添加一个 margin
    .van-collapse-item {
      margin: 10px;
    }

    // 方向
    .direction-container {
      .direction-box {
        font-size: 18px;
        .row {
          display: flex;
          justify-content: center;
          align-items: center;

          .direction-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;

            &.active {
              color: var(--van-primary-color);
            }
          }
        }
      }
    }

    // 复位
    .reset-container {
      :deep(.van-collapse-item__content) {
        padding: 0; // 去除内容区域的默认内边距
      }
    }

    // 行驶抱闸
    .drive-brake-container {
      :deep(.van-collapse-item__title) {
        .tip {
          margin-right: 4px;
          color: #cacacd;
        }
      }
      :deep(.van-collapse-item__content) {
        padding: 0; // 去除内容区域的默认内边距
      }
    }

    // 报警
    .alarm-container {
      :deep(.van-collapse-item__title) {
        .tip {
          margin-right: 4px;
          color: #cacacd;
        }
        .tip.red {
          color: #f00;
        }
      }
      :deep(.van-collapse-item__content) {
        padding: 0; // 去除内容区域的默认内边距
      }
    }

    // 位置
    .location-container {
      .location-btn {
        padding-top: var(--van-padding-sm);
      }
    }

    // 举升和下降
    .lifting-and-lowering-container {
      :deep(.van-collapse-item__content) {
        display: flex;
        justify-content: space-between;
        .lifting-btn {
          margin-right: 6px;
        }
      }
    }

    // 行驶方式1
    .driving-mode1-container {
      // 速度
      .speed {
        .speed-button {
          width: 40px;
          color: #fff;
          font-size: 10px;
          line-height: 18px;
          text-align: center;
          background-color: var(--van-primary-color);
          border-radius: 100px;
        }
      }
      // 校准
      .adjust {
        :deep(.van-field__control) {
          display: flex;
          justify-content: space-between;
        }
      }
      .location-btn {
        display: flex;
        justify-content: right;
        padding-top: var(--van-padding-sm);
      }
    }

    // 行驶方式2
    .driving-mode2-container {
      :deep(.van-field__control) {
        display: flex;
        justify-content: space-between;
      }

      .location-btn {
        display: flex;
        justify-content: space-between;
        padding-top: var(--van-padding-sm);
        .drive-btn {
          margin-right: 6px;
        }
      }
    }

    // 充电控制
    .charge-control-container {
      :deep(.van-collapse-item__title) {
        .tip {
          margin-right: 4px;
          color: #cacacd;
        }
      }
      :deep(.van-collapse-item__content) {
        padding: 0; // 去除内容区域的默认内边距
      }
    }
  }

  // 底部车辆信息
  .bottom-car-info {
    // 车辆信息内容
    :deep(.van-floating-panel__content) {
      padding: 0 20px;

      .row {
        display: flex;
        justify-content: space-between;
        margin: 4px 0;
        .left-box,
        .right-box {
          flex: 1;
        }
      }
    }
  }
}
</style>
